<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>shop store</title>
    <script src="https://unpkg.com/vue@2/dist/vue.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <!-- 引入Font Awesome图标库 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
    <!-- <link rel="stylesheet" href="../css/main.css"> -->
    <link rel="stylesheet" href="../css/shop.css">
</head>

<body>
    <!-- 头部导航栏开始 -->
    <header>
        <!-- 响应式菜单切换按钮 -->
        <input type="checkbox" name="" id="toggler">
        <label for="toggler" class="fas fa-bars"></label>

        <!-- 网站Logo -->
        <a href="#" class="logo"><img src="../images/logo.png"></a>

        <!-- 导航菜单 -->
        <nav class="navbar">
            <a href="./main.html">回到首页</a>
            <a href="#">回到顶部</a>
            <a href="#products">最新产品</a>
            <a href="#discount">当季促销</a>
            <a href="#contact">联系我们</a>
        </nav>

        <!-- 用户操作图标 -->
        <div class="icons">
            <div class="fas fa-search" id="search-btn"></div><!--搜素-->
            <div class="fas fa-heart" id="heart-btn"></div> <!-- 收藏 -->
            <div class="fas fa-shopping-cart" id="shop-btn"> </div> <!-- 购物车 -->
            <div class="fas fa-user" id="login-btn"></div> <!-- 用户中心 -->
        </div>

        <!-- 图标操作 -->

        <!--搜素-->
        <form action="" class="search-form">
            <input type="search" placeholder="search here..." id="search-box">
            <label for="search-box" class="fas fa-search"></label>
        </form>

        <!-- 收藏 -->
        <div class="heart">
            <!-- <div class="box">
                <i class="fas fa-times"></i>
                <img src="../images/product/01.jpg" alt="">
                <div class="content">
                    <h3>organic food </h3>
                    <span class="price">$18.99</span>
                </div>
            </div> -->
            <h3 class="total">total :<span>共0件</span></h3>
            <a href="#products" class="btn">去选购</a>
        </div>

        <!-- 购物车 -->
        <div class="shopping-cart">
            <!-- <div class="box">
                <i class="fas fa-times"></i>
                <img src="../images/product/04.jpg" alt="">
                <div class="content">
                    <h3>organic food </h3>
                    <span class="quantity">1</span>
                    <span class="multiply">×</span>
                    <span class="price">$18.99</span>
                </div>
            </div> -->

            <h3 class="total">total :<span>共0项，总计0元</span></h3>
            <a href="#" class="btn">去结算</a>
        </div>

        <!-- 用户登录 -->
        <form action="" class="login-form">
            <h3>登录</h3>
            <input type="email" placeholder="请输入您的邮箱账号" class="box">
            <input type="password" placeholder="请输入您的密码" class="box">
            <div class="remember">
                <input type="checkbox" name="" id="remember-me">
                <label for="remember-me">记住我</label>
            </div>
            <input type="submit" value="登录" class="btn">
            <p>没有账号？ <a href="./register.html">点击这里</a></p>
        </form>


    </header>
    <!-- 头部导航栏结束 -->

    <!-- 轮播大图 -->
    <section class="home">
        <div class="slides-container">
            <div class="slide active">
                <div class="content">
                    <span>fresh and oraganic</span>
                    <h3>upto 50% off</h3>
                    <a href="#products" class="btn">去看看</a>
                </div>
                <div class="image">
                    <img src="../images/index/01.png" alt="">
                </div>
            </div>

            <div class="slide">
                <div class="content">
                    <span>fresh and oraganic</span>
                    <h3>upto 50% off</h3>
                    <a href="#products" class="btn">去看看</a>
                </div>
                <div class="image">
                    <img src="../images/index/02.png" alt="">
                </div>
            </div>
        </div>

        <div id="next-slide" class="fas fa-angle-right" onclick="next()"></div>
        <div id="prev-slide" class="fas fa-angle-left" onclick="prev()"></div>
    </section>


    <!-- 商品 -->

    <section class="products" id="products">
        <h1 class="heading"> <span>最新</span>产品 </h1>
        <h1 class="title">our <span>products</span> <a href="#">更多 >></a></h1>

        <div class="box-container">

            <div class="box">
                <div class="icons">
                    <div class="fas fa-heart"></div>
                    <div class="fas fa-shopping-cart"></div>
                    <a class="fas fa-eye" href="./show.html"></a>
                </div>

                <div class="image">
                    <img src="../images/product/01.jpg" alt="">
                </div>

                <div class="content">
                    <h3>辣椒</h3>
                    <div class="price">$7.99</div>
                    <div class="stars">
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star-half-alt"></i>
                    </div>
                </div>
            </div>

            <div class="box">
                <div class="icons">
                    <div class="fas fa-heart"></div>
                    <div class="fas fa-shopping-cart"></div>
                    <div class="fas fa-eye"></div>
                </div>

                <div class="image">
                    <img src="../images/product/02.jpg" alt="">
                </div>

                <div class="content">
                    <h3>胡萝卜</h3>
                    <div class="price">$8.99</div>
                    <div class="stars">
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star-half-alt"></i>
                    </div>
                </div>
            </div>

            <div class="box">
                <div class="icons">
                    <div class="fas fa-heart"></div>
                    <div class="fas fa-shopping-cart"></div>
                    <div class="fas fa-eye"></div>
                </div>

                <div class="image">
                    <img src="../images/product/03.jpg" alt="">
                </div>

                <div class="content">
                    <h3>黄瓜</h3>
                    <div class="price">$9.99</div>
                    <div class="stars">
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star-half-alt"></i>
                    </div>
                </div>
            </div>

            <div class="box">
                <div class="icons">
                    <div class="fas fa-heart"></div>
                    <div class="fas fa-shopping-cart"></div>
                    <div class="fas fa-eye"></div>
                </div>

                <div class="image">
                    <img src="../images/product/04.jpg" alt="">
                </div>

                <div class="content">
                    <h3>茄子</h3>
                    <div class="price">$18.99</div>
                    <div class="stars">
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star-half-alt"></i>
                    </div>
                </div>
            </div>

            <div class="box">
                <div class="icons">
                    <div class="fas fa-heart"></div>
                    <div class="fas fa-shopping-cart"></div>
                    <div class="fas fa-eye"></div>
                </div>

                <div class="image">
                    <img src="../images/product/05.jpg" alt="">
                </div>

                <div class="content">
                    <h3>丝瓜</h3>
                    <div class="price">$18.99</div>
                    <div class="stars">
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star-half-alt"></i>
                    </div>
                </div>
            </div>

            <div class="box">
                <div class="icons">
                    <div class="fas fa-heart"></div>
                    <div class="fas fa-shopping-cart"></div>
                    <div class="fas fa-eye"></div>
                </div>

                <div class="image">
                    <img src="../images/product/06.jpg" alt="">
                </div>

                <div class="content">
                    <h3>番茄</h3>
                    <div class="price">$18.99</div>
                    <div class="stars">
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star-half-alt"></i>
                    </div>
                </div>
            </div>

            <div class="box">
                <div class="icons">
                    <div class="fas fa-heart"></div>
                    <div class="fas fa-shopping-cart"></div>
                    <div class="fas fa-eye"></div>
                </div>

                <div class="image">
                    <img src="../images/product/07.jpg" alt="">
                </div>

                <div class="content">
                    <h3>洋葱</h3>
                    <div class="price">$18.99</div>
                    <div class="stars">
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star-half-alt"></i>
                    </div>
                </div>
            </div>

            <div class="box">
                <div class="icons">
                    <div class="fas fa-heart"></div>
                    <div class="fas fa-shopping-cart"></div>
                    <div class="fas fa-eye"></div>
                </div>

                <div class="image">
                    <img src="../images/product/08.jpg" alt="">
                </div>

                <div class="content">
                    <h3>卷心菜</h3>
                    <div class="price">$18.99</div>
                    <div class="stars">
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star-half-alt"></i>
                    </div>
                </div>
            </div>

            <div class="box">
                <div class="icons">
                    <div class="fas fa-heart"></div>
                    <div class="fas fa-shopping-cart"></div>
                    <div class="fas fa-eye"></div>
                </div>

                <div class="image">
                    <img src="../images/product/09.jpg" alt="">
                </div>

                <div class="content">
                    <h3>青菜</h3>
                    <div class="price">$18.99</div>
                    <div class="stars">
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star-half-alt"></i>
                    </div>
                </div>
            </div>

            <div class="box">
                <div class="icons">
                    <div class="fas fa-heart"></div>
                    <div class="fas fa-shopping-cart"></div>
                    <div class="fas fa-eye"></div>
                </div>

                <div class="image">
                    <img src="../images/product/10.jpg" alt="">
                </div>

                <div class="content">
                    <h3>红辣椒</h3>
                    <div class="price">$18.99</div>
                    <div class="stars">
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star-half-alt"></i>
                    </div>
                </div>
            </div>

        </div>




        <h1 class="heading" id="discount"> <span>当季</span>促销 </h1>
        <h1 class="title">our <span>products</span> <a href="#">更多 >></a></h1>

        <div class="box-container">
            <div class="box">
                <div class="icons">
                    <div class="fas fa-heart" data-product-id="1"></div>
                    <div class="fas fa-shopping-cart"></div>
                    <div class="fas fa-eye"></div>
                </div>
                <div class="image">
                    <img src="../images/product/11.jpg" alt="">
                </div>
                <div class="content">
                    <h3>豇豆</h3>
                    <div class="price">$3.99</div>
                    <div class="stars">
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star-half-alt"></i>
                    </div>
                </div>
            </div>


            <div class="box">
                <div class="icons">
                    <div class="fas fa-heart" data-product-id="1"></div>
                    <div class="fas fa-shopping-cart"></div>
                    <div class="fas fa-eye"></div>
                </div>
                <div class="image">
                    <img src="../images/product/12.jpg" alt="">
                </div>
                <div class="content">
                    <h3>南瓜</h3>
                    <div class="price">$5.99</div>
                    <div class="stars">
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star-half-alt"></i>
                    </div>
                </div>
            </div>


            <div class="box">
                <div class="icons">
                    <div class="fas fa-heart" data-product-id="1"></div>
                    <div class="fas fa-shopping-cart"></div>
                    <div class="fas fa-eye"></div>
                </div>
                <div class="image">
                    <img src="../images/product/13.jpg" alt="">
                </div>
                <div class="content">
                    <h3>草莓</h3>
                    <div class="price">$3.99</div>
                    <div class="stars">
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star-half-alt"></i>
                    </div>
                </div>
            </div>

            <div class="box">
                <div class="icons">
                    <div class="fas fa-heart" data-product-id="1"></div>
                    <div class="fas fa-shopping-cart"></div>
                    <div class="fas fa-eye"></div>
                </div>
                <div class="image">
                    <img src="../images/product/14.jpg" alt="">
                </div>
                <div class="content">
                    <h3>芒果</h3>
                    <div class="price">$3.99</div>
                    <div class="stars">
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star-half-alt"></i>
                    </div>
                </div>
            </div>

            <div class="box">
                <div class="icons">
                    <div class="fas fa-heart" data-product-id="1"></div>
                    <div class="fas fa-shopping-cart"></div>
                    <div class="fas fa-eye"></div>
                </div>
                <div class="image">
                    <img src="../images/product/15.jpg" alt="">
                </div>
                <div class="content">
                    <h3>坚果</h3>
                    <div class="price">$3.99</div>
                    <div class="stars">
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star-half-alt"></i>
                    </div>
                </div>
            </div>

            <div class="box">
                <div class="icons">
                    <div class="fas fa-heart" data-product-id="1"></div>
                    <div class="fas fa-shopping-cart"></div>
                    <div class="fas fa-eye"></div>
                </div>
                <div class="image">
                    <img src="../images/product/16.jpg" alt="">
                </div>
                <div class="content">
                    <h3>芒果</h3>
                    <div class="price">$3.99</div>
                    <div class="stars">
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star-half-alt"></i>
                    </div>
                </div>
            </div>

            <div class="box">
                <div class="icons">
                    <div class="fas fa-heart" data-product-id="1"></div>
                    <div class="fas fa-shopping-cart"></div>
                    <div class="fas fa-eye"></div>
                </div>
                <div class="image">
                    <img src="../images/product/17.jpg" alt="">
                </div>
                <div class="content">
                    <h3>芒果</h3>
                    <div class="price">$3.99</div>
                    <div class="stars">
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star-half-alt"></i>
                    </div>
                </div>
            </div>

            <div class="box">
                <div class="icons">
                    <div class="fas fa-heart" data-product-id="1"></div>
                    <div class="fas fa-shopping-cart"></div>
                    <div class="fas fa-eye"></div>
                </div>
                <div class="image">
                    <img src="../images/product/18.jpg" alt="">
                </div>
                <div class="content">
                    <h3>芒果</h3>
                    <div class="price">$3.99</div>
                    <div class="stars">
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star-half-alt"></i>
                    </div>
                </div>
            </div>

            <div class="box">
                <div class="icons">
                    <div class="fas fa-heart" data-product-id="1"></div>
                    <div class="fas fa-shopping-cart"></div>
                    <div class="fas fa-eye"></div>
                </div>
                <div class="image">
                    <img src="../images/product/19.jpg" alt="">
                </div>
                <div class="content">
                    <h3>芒果</h3>
                    <div class="price">$3.99</div>
                    <div class="stars">
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star-half-alt"></i>
                    </div>
                </div>
            </div>

            <div class="box">
                <div class="icons">
                    <div class="fas fa-heart" data-product-id="1"></div>
                    <div class="fas fa-shopping-cart"></div>
                    <div class="fas fa-eye"></div>
                </div>
                <div class="image">
                    <img src="../images/product/20.jpg" alt="">
                </div>
                <div class="content">
                    <h3>芒果</h3>
                    <div class="price">$3.99</div>
                    <div class="stars">
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star-half-alt"></i>
                    </div>
                </div>
            </div>

        </div>


    </section>

    <!-- 联系我们部分开始 -->
    <section class="contact" id="contact">
        <h1 class="heading"> <span>联系</span>我们 </h1>

        <div class="row">
            <form action="">
                <input type="text" placeholder="姓名" class="box">
                <input type="email" placeholder="邮箱" class="box">
                <input type="number" placeholder="电话" class="box">
                <textarea name="" class="box" placeholder="留言" id="" cols="30" rows="10"></textarea>
                <input type="submit" value="发送消息" class="btn">
            </form>

            <div class="image">
                <img src="../images/recom.jpg" alt="">
            </div>
        </div>
    </section>
    <!-- 联系我们部分结束 -->


    <!-- 底部版权信息部分开始 -->
    <section class="footer">
        <div class="box-container">
            <div class="box">
                <h3>快速链接</h3>
                <a href="#home">首页</a>
                <a href="#about">关于我们</a>
                <a href="#products">最新产品</a>
                <a href="#review">评价</a>
                <a href="#contact">联系我们</a>
            </div>

            <div class="box">
                <h3>其他链接</h3>
                <a href="#">我的账户</a>
                <a href="#">我的订单</a>
                <a href="#">我的收藏</a>
            </div>

            <div class="box">
                <h3>地点</h3>
                <a href="#">印度</a>
                <a href="#">美国</a>
                <a href="#">日本</a>
                <a href="#">法国</a>
            </div>

            <div class="box">
                <h3>联系方式</h3>
                <a href="#">+123-456-7890</a>
                <a href="#">example@CatTom.com</a>
                <a href="#">重庆批发 - 4000000</a>
                <img src="../images/images-flowers/payment.png" alt="">
            </div>
        </div>


    </section>
    <!-- 底部版权信息部分结束 -->


    <script type="text/javascript" src="../script/shop.js"></script>

</body>

</html>